﻿/*
*********************************************
~ BUTTON & BUTTON HYPERLINK
*********************************************
*/
/* Css3 Input button - No Bg Image */
.button {
	display: inline-block;
	height:22px;
	font-size:11px;
	line-height: 22px;
	font-weight:bold;
	font-family: Tahoma;
	color:#fff;
	text-decoration:none;
	margin:0 0 0 5px;
	text-align: center;
	padding: 0 6px 3px;
	background-color: #00adef;
	border: 1px solid #0075a2;
	border-radius: 3px;
	-moz-border-radius: 3px;
	cursor: pointer;
}
.button:hover {color: #fff; background-color: #585858; border: 1px solid #424242;}

/* Input button & link button width left-right bg_image */
.df_btn a,.df_ibtn,.df_btn_disable a,.df_ibtn_disable{background-image:url(../images/buttons/bgbtn_left.gif);background-repeat:no-repeat;}
.df_btn a, .df_ibtn {background-position:0 -46px;}
.df_btn a:hover, .df_ibtn:hover {background-position:0 -23px; color: #ebebeb;}  /* Hover Background Left */
.df_btn_disable a, .df_ibtn_disable {background-position: 0 0;}
.df_btn a .btext,.df_ibtn input,.df_btn_disable .btext,.df_ibtn_disable input{background-image:url(../images/buttons/bgbtn_right.gif);background-repeat:no-repeat;}
.df_btn .btext,.df_ibtn input{background-position:right -46px;color:#fff;}
.df_btn a:hover .btext,.df_ibtn:hover input{background-position:right -23px;/* Hover Background Right*/ color:#ebebeb;}
.df_btn_disable .btext,.df_ibtn_disable input{background-position:right 0;color:#ebebeb;}
.df_btn, .df_ibtn, .df_btn_disable, .df_ibtn_disable {height: 23px;}

/* Button link with icon */
.df_btn.icon_btn .icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	vertical-align: -3px;
	font-size:0;
	line-height:0;
	background-image: url(../images/func_icons/function_icons16x16.gif);
}
.btn_save .icon {background-position: 0 0;}
.btn_cancel .icon {background-position: -16px 0;}
.btn_addnew .icon {background-position: -64px 0;}
.btn_export_excel .icon, .btn_import_excel .icon {background-position: 0 -16px;}
.btn_stop .icon {background-position: -32px -16px;}
.btn_search .icon {background-position: -16px -16px;}

/*
*********************************************
~ HYPERLINKS & ICON LINKS
*********************************************
*/
/* Function icons */
.icon_lkbtn {
	border:1px solid #1EB0FF;
	color:#267FC4;
	font-weight:bold;
	line-height:normal;
	margin:0 0 0 5px;
	padding:3px 5px 3px 24px;
	text-decoration:none;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #C1E4FF;
	background-repeat: no-repeat;
}
.icon_lkbtn:hover{background-color:#FFDF4C !important;border:1px solid #FF7200;color:#FF7200;text-decoration:none;}
.add_icon, .edit_icon, .del_icon,.delete_icon, .bin_icon, .check_icon, .uncheck_icon,
.icon_collapse, .icon_expand, .info_icon, .save_icon, .cancel_icon,
.up_icon, .uptotop_icon, .down_icon, .downtobottom_icon, .edit_img_icon, .del_img_icon {
	background-image: url(../images/func_icons/function_icons16x16.gif);
	background-repeat: no-repeat;
	display: inline-block;
	height: 16px;
	width: 16px;
	overflow: hidden;
	margin: 1px 1px 0;
	white-space:nowrap;
	text-indent:-9999em;
	!text-indent: 0;
 	!font-size:0;
	line-height:1;
}
.add_icon {background-position: -64px 0;}
.edit_icon {background-position: -112px 0;}
.edit_img_icon {background-position: -80px -16px;}
.del_img_icon {background-position: -64px -16px;}
.bin_icon {background-position: -192px 0;}
.del_icon, .delete_icon {background-position: -96px 0;}
.check_icon {background-position: -144px 0;}
.uncheck_icon {background-position: -128px 0;}
.icon_collapse {background-position: -160px 0; margin: 0 auto; cursor: pointer;}
.icon_expand_grid
{
   	background-image: url(../images/func_icons/expand.gif);
	background-repeat: no-repeat;
	display: inline-block;
	height: 16px;
	width: 16px;
	overflow: hidden;
	margin: 1px 1px 0;
	white-space:nowrap;
	text-indent:-9999em;
	!text-indent: 0;
 	!font-size:0;
	line-height:1;
 
}
.icon_collapse_grid
{
    background: url(../images/func_icons/collapse.gif) no-repeat;
}
.icon_expand {background-position: -176px 0; margin: 0 auto; cursor: pointer;}
.info_icon {background-position: -208px 0;}
.save_icon {background-position: 0 0;}
.cancel_icon {background-position: -16px 0;}
.up_icon {background-position: -224px 0;}
.uptotop_icon {background-position: -256px 0;}
.down_icon {background-position: -240px 0;}
.downtobottom_icon {background-position: -272px 0;}

/*
*********************************************
~ PAGINATOR
*********************************************
*/
.paginator2 {padding-top: 10px; padding-bottom: 10px; height: 22px;}
* html .paginator2 {position: relative;}
.paginator2 a {
	display:inline;
	padding: 1px 5px;
	margin: 0 2px;
	line-height: 15px;
	border: 1px solid #d0d0d0;
	font-size:11px;
	font-weight: bold;
	background-color: #fff;
}
.paginator2 a:hover {background-color: #b2b2b2; border: 1px solid #b2b2b2; color: #3d3d3d;}
.paginator2 a.selected, .paginator2 a.active {background-color: #00adef; border: 1px solid #00adef; color: #fff;}

/*
*********************************************
~ LIST STYLES
*********************************************
*/
ul.df_list {padding: 0 0 7px 15px;}
ul.df_list li {
  background-image:url(../images/bullet.gif);
	background-position:0px 9px;
	padding: 2px 0 2px 13px;
	background-repeat: no-repeat;
  text-align: left;
}
ul.df_list li li {background-image:url(../images/circle_bullet.gif);}
ul.tiny_disc_list li {
	background-image: url(../images/tiny_bullet.gif);
	background-position: 5px 9px;
	background-repeat: no-repeat;
	padding: 2px 0px 2px 15px;
}
li ul.tiny_disc_list {margin-left: 10px;}
ul.square_bullet {padding: 0 0 7px 25px; line-height: normal;}
ul.square_bullet li {
	background-image: url(../images/square_dot_bullet.gif);
	background-position: 0 8px;
	padding: 2px 0 2px 10px;
	background-repeat: no-repeat;
}

/*
*********************************************
~ TAB MENU LINKS
*********************************************
*/
.simple_tab{margin-top:8px;  padding:0 0 20px 0px;margin-bottom:20px;}
.simple_tab li{margin:0;  padding:0;  display:inline;  list-style-type:none;}
.simple_tab a {
  float: left;
	line-height: normal;
  font-weight: bold;
  padding: 5px 7px 5px 7px;
	border: 1px solid #ccc;
	background-color: #e2e2e2;
  text-decoration: none;
  color: #708491;
	margin-right: 2px;
}
.simple_tab a:hover{color:#000;background-color:#fff;}
.simple_tab a.selected{color:#fff;background-color:#6d6d6d;border:1px solid #6d6d6d;}

/*
*********************************************
~ HEADING STYLES
*********************************************
*/
h2{color:#00adef;font-size:20px;line-height:normal;padding:0 0 7px 0;font-weight:normal;margin-bottom:15px;border-bottom:1px solid #e2e2e2;}
h2 .heading_links {float: right; font-style: normal; padding-top: 9px;} /* phần bên phải nằm trên cùng dùng page title */
h3{font-size:16px;font-weight:bold;padding:0 0 10px;line-height:normal;color:#3d3d3d;}

/*
*********************************************
~ FORM LAYOUT SIZES
*********************************************
*/
/* Form column sizes in Percent
-------------------------------- */
.form {padding: 5px; !height:1%;}
.form .formrow {display: block; _height: 18px;}
.form.form_1row .formrow {padding:3px 7px 3px 0;}
.form_1row .formrow, .form_2cols .formrow, .form_3cols .formrow, .form_4cols .formrow {float: left;}

.form_1col .formrow {border-top: 1px solid #fff; padding: 0;}
.form_1col label.lb {width: 20%;}
.form_1col label.lb,
.form_1col label.lb_smallest,
.form_1col label.lb_small,
.form_1col label.lb_medium,
.form_1col label.lb_large,
.form_1col label.lb_largest {padding: 5px 10px 5px 0; margin-right:-1px; border-right: 1px solid #fff;}
.form_1col .field_value, .form_1col .form_field {padding: 4px 0 4px 10px; width: 78%; border-left: 1px solid #fff;}
.bgcolor01 .formrow {background-color: #ebebeb;}
.bgcolor01 label {background-color: #ebebeb;}
.bgcolor01 .field_value, .bgcolor01 .form_field {background-color: #f2f2f2;}

.form.form_2cols .formrow {width: 50%;}
.form.form_2cols .formrow .lb {width: 30% /*200px;*/}
.form.form_2cols .formrow .field_value {width:67%;}
/*.form_2cols .formrow input, .form_2cols .formrow textarea {max-width: 355px;}
.form_2cols .formrow select {max-width: 360px;}*/

.form.form_3cols .formrow {width:33%;}
.form.form_3cols .formrow .lb {width: 33% /*130px;*/}
.form.form_3cols .formrow .field_value {width: 64%;}
/*.form_3cols .formrow input, .form_3cols .formrow textarea {max-width: 200px;}
.form_3cols .formrow select {max-width: 205px;}*/

.form.form_4cols .formrow {width: 25%;}
.form.form_4cols .formrow .lb {width: 37% /*125px*/;}
.form.form_4cols .formrow .field_value {width: 60%;}
/*.form_4cols .formrow input, .form_4cols .formrow textarea {max-width: 148px;}
.form_4cols .formrow select {max-width: 153px;}*/

/* Form column sizes in Fix Pixel
--------------------------------- */
.fixed_LabelWidthForm {margin: 0 auto; padding: 10px;}
.fixed_LabelWidthForm .multiCols_form .formrow {float: left;}

.fixed_LabelWidthForm.fixedform01 {width: 1150px;}
/* Form01: three cols */
.fixed_LabelWidthForm.fixedform01 .form_3cols .formrow {width: 383px;}
.fixed_LabelWidthForm.fixedform01 .lb {width: 150px;}
.fixed_LabelWidthForm.fixedform01 .form_3cols .lb {width: 150px;}

/* Tuong tu nhu form_1row
--------------------------------- */
.inline_form .formrow { float: left; padding-right: 10px;}
.inline_form .form_btn {padding-top: 22px; padding-bottom: 0; position: relative; left: -10px; float:left;}
.inline_form .fbtn {padding: 10px 0;} /* Dòng chứa button đầu hoặc cuối DataGrid va container */

/*
*********************************************
~ DATA GRID
*********************************************
*/
/* [ Default table ]
-------------------------------------- */
.df_table, .grid {margin-bottom: 15px;}
.df_table_caption {
	text-transform: uppercase;
	background: url(../images/table_styles/df_table_caption_bg.gif) top repeat-x;
	color: #fff;
	border: 1px solid #007cca;
	font-weight: bold;
}
.df_tbl_func_row {
	background: #d2e1f0 url(../images/table_styles/df_table_function_row.gif) top repeat-x;
	border: 1px solid #99BBE8;
	color: #5787bc;
	border-bottom: 0 none;
}
.df_table_caption,.df_tbl_func_row{padding:5px;_height:1%;}
.df_table .checkbox, .grid .checkbox {margin: 0; padding:0;}
.df_table, .df_table th, .df_table td, .grid, .grid th, .grid td {border: 1px solid #99BBE8;}
.df_table td, .grid td {padding: 3px; line-height: normal;background-color: #fff;}
.df_table tr.odd td, .grid tr.odd td {background-color: #fff;}
.df_table tr.even td, .grid tr.even td  {background-color: #fff8e6;}
.df_table tr.odd:hover td, .df_table tr.even:hover td, .df_table tr.selected td,
.grid tr.odd:hover td, .grid tr.even:hover td, .grid tr.selected td {
	background: #ffedb8 url(../images/table_styles/df_table_bg_grid_active.gif) bottom repeat-x;
	border: 1px solid #f3ce77;
}
.df_table tr.odd a:hover, .df_table tr.even a:hover, .grid tr.odd a:hover, .grid tr.even a:hover {color:#cd6a28;}
.df_table th, .grid th {
 	background: #c9defa url(../images/table_styles/df_tbl_headercell_bg.gif) top repeat-x;
	color: #487aba;
	text-align: left;
	vertical-align: middle;
	padding: 3px;
	line-height: 16px;
}
.df_table th.sortable, .grid th.sortable {background: #c9defa url(../images/table_styles/df_tbl_headercell_bg_sortable.gif) top repeat-x;}
.df_table th a, .grid th a {text-decoration: none; color: #287fa6;}
.df_table th a:hover, .grid th a:hover {color: #287fa6; text-decoration: underline;}
.df_table th span.headercell_title, .grid th span.headercell_title {float:left; text-align: left;}
.df_table td th, .grid td th {background-color: #c9defa; color: #487aba;}

/* Sort & Filter icon: Type01 */
.df_table th span.headercell_icn, .grid th span.headercell_icn {display:block; float:right; width: 8px; padding: 3px 0 0;}
 .df_table th span.headercell_icn a, .grid th span.headercell_icn a {
		text-indent: -9999em;
		display: block;
		width: 8px;
		height: 4px;
		overflow: hidden;
		background-repeat: no-repeat;
		background-image: url(../images/table_styles/df_table_thead_sort_icon.gif);
	}
	.df_table th span.headercell_icn a.up, .grid th span.headercell_icn a.up {background-position: 0 0;margin-bottom: 3px;}
  .df_table th span.headercell_icn a.up:hover, .grid th span.headercell_icn a.up:hover {background-position: 0 -8px;}
	.df_table th span.headercell_icn a.down, .grid th span.headercell_icn a.down {background-position: 0 -4px;}
  .df_table th span.headercell_icn a.down:hover, .grid th span.headercell_icn a.down:hover {background-position: 0 -12px;}

/* Sort & Filter icon: Type02 */
.df_table a.sort_activate {
	display: block;
	padding-right: 15px;
	height: 100%;
	cursor: pointer;
	background-position: right;
	background-repeat: no-repeat;
	background-image: url(../images/table_styles/df_table_thead_unsorted.gif);
}
.df_table a.sort_activate:hover {color: #333;}
.df_table a.descending {background-image: url(../images/table_styles/df_table_thead_descending.gif);}
.df_table a.ascending {background-image: url(../images/table_styles/df_table_thead_ascending.gif);}

	.df_table .filled_cell, .grid .filled_cell, .df_table tr.odd td.filled_cell, .grid tr.odd td.filled_cell, .df_table tr.even td.filled_cell, .grid tr.even td.filled_cell,
	.grid tr.name1 td, .df_table tr.name1 td {background-color: #cee6fe; color: #6198d0;}
	.grid tr.name1 td, .df_table tr.name1 td { text-transform: uppercase;}
  .df_table tr.name1 td, .grid tr.name1 td {font-weight: bold;}
	/*.df_tbl_func_row {padding: 6px 12px; height: 1%; background-color: #ededed; margin: 0 0 8px; border: 1px solid #e2e2e2;}*/

/* Sub cell */
.df_table .tbl_subcell, .grid .tbl_subcell {background: #dfeaf1; padding:0;}
.df_table .tbl_subcell_inner, .grid .tbl_subcell_inner {margin-left: 41px; padding:10px 5px}
.df_table h3 {margin-bottom:7px; font-size:14px; color:#3d3d3d; font-weight:bold; padding:0}

/* Sub cell */
.table_style2 .tbl_subcell {background: #e8e7dd; padding: 10px 5px 10px !important;}
.table_style2 .tbl_subcell_inner {margin-left: 41px;}
.table_style2 td th {background-color: #E3E3E3; color: #3d3d3d;}

/*
*********************************************
~ DIV GIRD VIEW
*********************************************
*/
.div_grid_header {
	background-color: #bbdbfb;
	border: 1px solid #adc9e6;
  border-top: 0 none;
	line-height: 25px;
	height: 25px;
	color: #333;
	font-weight: bold;
	text-align: center;
}
.div_grid_cell {float:left; border-right: 1px solid #adc9e6; padding: 0 5px;}
.div_grid_data {background: url(../images/div_grid/bg_grid_data_section.gif) repeat-x top; border: 1px solid #e2e2e2; border-top: 0 none;}
.div_grid_data .div_grid_cell {padding: 5px; border-right: 1px solid #e2e2e2; min-height: 18px;}

.div_grid_row {width: 100%; overflow: hidden; border-bottom:1px solid #e2e2e2; padding:0;}
.div_grid span.last {border-right: 0 none;}
.div_grid_checkcol {width: 20px; height: 20px; padding-top: 5px; display: inline-table;}
.choose_order_type {float:right; width: 8px; padding-top: 6px;}
.choose_order_type a {
	display: block;
	height: 4px;
  font-size:0;
  line-height: 0;
	font-size: 0;
	text-indent: -9999em;
	margin-bottom: 4px;
	background-image: url(../images/div_grid/grid_ordertype_arrow.gif);
}
.choose_order_type a.increase_order {background-position: 0 0;}
.choose_order_type a.increase_order:hover {background-position: 0 -8px;}
.choose_order_type a.descrease_order {background-position: 0 -4px;}
.choose_order_type a.descrease_order:hover {background-position: 0 -12px;}
.div_grid .w96px {width: 96px;}
.div_grid .w339px {width: 339px;}
.div_grid .w79px {width: 79px;}
.div_grid .w390px {width: 390px;}
.div_grid .w33px {width: 33px;}


/*
*********************************************
~ INFORMATION MESSAGES
*********************************************
*/
.notice_msg, .success_msg, .info_msg, .error_msg {
	background-repeat:no-repeat;
	background-position: 12px 9px;
	padding: 8px 8px 8px 40px;
	margin-bottom: 8px;
	border-radius: 5px;
	-moz-border-radius: 5px;
}
.notice_msg {
	background-color:#fffcd3;
	background-image: url(../images/func_icons/icon_notice_msg.gif);
	border: 1px solid #c2beb1;
	color:#57472a;
}
.success_msg {
	background-color: #e5f993;
	background-image: url(../images/func_icons/icon_succes_msg.gif);
	border: 1px solid #9bac55;
	color:#688006;
}
.info_msg {
	background-color: #d4ebfa;
	background-image: url(../images/func_icons/icon_info_msg.gif);
	border: 1px solid #90b1c7;
	color: #225ea1;
}
.error_msg {
	background-color:#f6b9b9;
	background-image: url(../images/func_icons/icon_error_msg.gif);
	border: 1px solid #e18484;
	color: #cd2757;
}

/*
*********************************************
~ CONTAINER DATA
*********************************************
*/
.container_data {margin-bottom: 15px;}
	.container_data .header_container {
		padding: 0 0 0 8px;
		font-size:13px;
		font-family: Arial, Tahoma;
		text-transform: uppercase;
		line-height: normal;
		color: #fff;
		height: 25px;
		font-weight: bold;
		background: url(../images/container/left_header_container_title.gif) no-repeat top left;
		border-bottom: 5px solid #005c91;
	}
 .container_data .header_container .container_text {
		float: left;
		height: 18px;
		padding-top: 7px;
		padding-right: 50px;
		background: #005c91 url(../images/container/right_header_container_title.gif) no-repeat top right
	}
	.container_data .header_container .container_flink {
		display:block;
		font-family:Arial;
		font-size:11px;
		text-transform:none;
		float: right;
	}
 .container_data .content, .container_data .content_bg_gray, .container_data .content_bg_blue {
		padding: 10px;
		border: 1px solid #dbdbdb;
	/*border-top: 0 none;*/
	  !height: 1%;
	}
	.container_data .content {background-color: #fff;}
	.container_data .content_bg_gray {background-color: #ededed;}
	.container_data .content_bg_blue {background-color: #E4EEF8; border: 1px solid #CADDF1;}
.container_data .c_icon, .c_icon_expanded, .c_icon_collapsed {
	display: block;
	float: right;
	font-weight: bold;
	color: #333;
	width: 16px;
	height: 16px;
	text-indent: -9999em;
}
	.c_icon_expanded {background: url(../images/func_icons/function_icons16x16.gif) -304px 0;}
	.c_icon_collapsed {background: url(../images/func_icons/function_icons16x16.gif) -288px 0;}
.container_data .container_text {float: left;}
.container_data .df_table, .container_data .table_style2,.container_data .grid {margin-top: 2px; margin-bottom: 0;}

/* container header tab */
.header_tab_container {
	padding: 7px 8px 0;
	height: 23px;
	background-color: #005C91;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	position: relative;
	top: 1px;
}

.c_tab {float: left; display: block; height: 23px;}
.c_tab li {display: inline; float: left;}
.c_tab li a {
	float: left;
	padding-left: 8px;
	color: #81bee2;
	font-weight: bold;
	text-decoration: none;
	background:#0074b6;
	margin-right: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
}
.c_tab li a span {
	float: left;
	padding-right: 8px;
	line-height: 23px;
	height: 23px;
}
.c_tab li a:hover {text-decoration: none; color:#fff; cursor: pointer; background: #002b44;}
.c_tab li a.selected, .c_tab li a.selected:hover {background: #fff; text-decoration: none; color:#333;}

/*
*********************************************
~ POPUP DEFAULT
*********************************************
*/
.divPopup_bg {
	opacity: 0.8;
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	filter: alpha(opacity=30);
	-moz-opacity: 0.30;
	z-index: 1000;
	width: 100%;
	height: 1000px;
	background-color: #000;
}
.divPopup_wrapperMain {
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	z-index: 1020;
	margin-left: auto;
	margin-right: auto;
}
.divPopup_border{border:5px solid #7ebfdf;margin:auto;min-width:300px;background:#FFF;}
.divPopup_wrapper{border:1px solid #3b4046;}
.divPopup_wrapper .close{margin-top:5px;width:29px;height:16px;background:url(../images/popup/close.gif) no-repeat 0 0;text-decoration:none;}
.divPopup_wrapper .close:hover {
	margin-top: 5px;
	width: 29px;
	height: 16px;
	background: url(../images/popup/close.gif) no-repeat;
	background-position: 0px -16px;
	text-decoration: none;
	cursor: pointer;
}
.divPopup_wrapper .mceClose {
	margin-top: 5px;
	width: 29px;
	height: 16px;
	background: url(imgs/popup/close.gif) no-repeat 0 0;
	text-decoration: none;
}
.divPopup_wrapper .mceClose:hover {
	margin-top: 5px;
	width: 29px;
	height: 16px;
	background: url(imgs/popup/close.gif) no-repeat;
	background-position: 0px -16px;
	text-decoration: none;
	cursor: pointer;
}
.barpopup{background-color:#5c5c5c;border-bottom:1px solid #3b4046;}
.titlepopup {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	height: 23px;
	padding-top: 7px;
  padding-left: 10px;
	font-family: Arial;
}
.bottom-popup{background:#ededed;height:43px;}
#popup_message{text-align:center;padding:10px 5px 10px 5px;display:block;}
.popup_message{text-align:center;padding:5px;display:block;}
.popup_bot_btn{padding:10px 10px 0 0}
.custom_checkbox
{
    margin-top:5px !important;
}
.displayclass
{
    display:block;
    }
    
.hideclass
{
    display:none;
    }
    




